import React from 'react';
import { Image, FlatList } from 'react-native';
import { Toast } from 'antd-mobile-rn';
import Scene from '../screen/scene';
import { Navigation } from 'react-native-navigation';
import NormalHeader from '../../components/NormalHeader';
import { createStyles } from '../../utils/view';
import GoodsItem from './component/goodItem';
import { getList } from '../../service/market';
import Storage from '../../utils/storage';
import { connect } from 'react-redux';
import authActions from '../../controllers/auth/actions';

class MarketScreen extends React.Component {
  static navigatorStyle = {
    navBarHidden: true,
    navBarNoBorder: true,
  };

  constructor(props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
    this.state = {
      page: 1,
      pageSize: 10,
      list: [],
      hasMore: true,
      loading: false,
    };
  }

  onNavigatorEvent(event) {
    if (event.type === 'ScreenChangedEvent') {
      if (event.id === 'didAppear') {
        this.init();
      }
    }
  }

  init = () => {
    this.getList({ page: 1 });
  }

  getList = async ({ page, more }) => {
    const token = await Storage.load('token');
    const { pageSize, list } = this.state;
    if (token) {
      this.setState({ loading: true });
      const data = await getList({ token, page, pageSize });
      if (data.code === 0) {
        if (more) { // 如果是下拉加载
          let hasMore = (data.data.length === pageSize);
          this.setState({
            list: list.concat(data.data),
            page: page,
            loading: false,
            hasMore
          });
        } else {
          this.setState({
            list: data.data,
            page: page,
            loading: false,
          });
        }
      } else {
        this.setState({ loading: false });
        Toast.fail(data.msg);
        if (data.code === -1) {
          // 用户过期
          this.props.Logout();
        }
      }
    } else {
      Navigation.showModal({
        screen: 'Login',
        title: '登录',
        passProps: {},
        animated: true,
        animationType: 'slide-horizontal',
        navigatorStyle: {},
        navigatorButtons: {},
      });
    }
  }

  // 下拉加载
  _onEndReached = async () => {
    const { loading, hasMore, page } = this.state;
    if (!loading && hasMore) {
      this.getList({ page: page + 1, more: true });
    }

  }

  // 上拉刷新
  _onRefresh = async () => {
    const token = await Storage.load('token');
  }

  render() {
    const { loading } = this.state;
    return (
      <Scene isLoading={loading} >
        <NormalHeader>市场</NormalHeader>
        <Image style={styles.banner} source={require('../../assets/img/home/banner.png')} resizeMode="stretch" />
        <FlatList
          data={this.state.list}
          renderItem={({ item }) => <GoodsItem data={item} />}
          onEndReached={this._onEndReached}
          keyExtractor={(item, index) => `${item.id}`}
          // onRefresh={this._onRefresh}
        />
        {/* </Flex> */}
      </Scene>
    );
  }
}

let styles = {
  banner: {
    height: 300,
    width: 750,
  },
  goodsList: {
    flex: 1,

  }

};

styles = createStyles(styles);
export default connect((Store) => {
  return { };
}, { Logout: authActions.Logout })(MarketScreen);